<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>神力无敌</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css"/>
		<style type="text/css">
			/*html,body,.container-bg {
				height: 100%;
			}*/
			* {
				cursor: url(img/hum1.cur),pointer;
			}
			.header {
				padding-top: 20px;
			}
			.container-bg {
				/*background: url(img/container-bg.jpg);
				background-size:cover ;*/
			}
			.container {
				overflow: hidden;
			}
			.main-l {
				float: left;
				background: #18222b;
				min-height: 100vh;
				height: 100%;
				width: 180px;
				padding-bottom: 2000px;
				margin-bottom: -2000px;
			}
			.search {
				height: 170px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: url(img/leimu.jpg) no-repeat -102px center;
				background-size:170% ;
			}
			.search-input {
				height: 24px;
				background: rgba(255, 255, 255,.6);
			}
			.nav {
				
				padding-top: 32px;
			}
			.nav  a{
				font-size: 18px;
				color: #fff;
				margin-bottom: 20px;
				display: block;
				text-align: center;
				padding: 16px;
			}
			.nav  .nav-ac1:hover {
				background:url(img/29.gif) #464e55 no-repeat right;
				background-size:40px ;
			}
			.nav  .nav-ac2:hover {
				background: url(img/37.gif) #464e55 no-repeat right;
				background-size:40px ;
			}
			.nav  .nav-ac3:hover {
				background: url(img/07.gif) #464e55 no-repeat right;
				background-size:40px ;
			}
			.nav  .nav-ac4:hover {
				background: url(img/41.gif) #464e55 no-repeat right;
				background-size:40px ;
			}
			.nav  .nav-ac5:hover {
				background: url(img/02.gif) #464e55 no-repeat right;
				background-size:40px ;
			}
			/**/
			.main-c {
				margin-left: 50px;
				padding-top: 20px;
				float: left;
			}
			.box-section {
				width: 600px;
			    padding: 10px;
			    border-radius: 6px;
			    border: 1px solid #ccc;
			    transition: all .3s ease-in;
			    margin-bottom: 24px;
			}
			.box-section:hover {
				 box-shadow:2px 1px 7px #333333;
			}
			.box-section .title {
				font-size: 26px;
    			margin-bottom: 10px;
			}
			.box-section .title a {
				color: #18222B;
			}
			.box-section .time {
				margin-bottom: 10px;
			}
			.box-section .time span {
				background-color: #1abc9c;
    			padding: 2px 10px;
    			border-radius: 6px;
    			color: #fff;
			}
			.box-section .time time {
				margin-left: 30px;
			}
			.box-section .text {
				margin-bottom: 10px;
			}
			.box-section .text a{
				color: #18222B;
			}
			.box-section .fa {
				margin-right: 20px;
			}
			.box-section .fa em{
				margin-left: 6px;
			}
			.box-section .fa-thumbs-o-up {
				cursor: pointer;
			}
			/**/
			.main-r {
				float: right;
				width: calc(100vw - 870px);
			}
		</style>
	</head>
	<body>
		<div class="container-bg">	
			<div class="container">
				<div class="main-l">
					<div class="search">
						<!--<div>
							<input class="search-input" type="text" />
							<button>搜索</button>
						</div>-->
					</div>
					<div class="nav">						
						<a class="nav-ac1" href="#">首页</a>
						<a class="nav-ac2" href="#">心情小记</a>
						<a class="nav-ac3" href="#">技术小抄</a>
						<a class="nav-ac5" href="#">羞羞小片</a>
						<a class="nav-ac4" href="#">关于本尊</a>
					</div>
				</div>
				<div class="main-c">
					<div class="box-section">
						<h4 class="title"><a href="#">为了部落</a></h4>
						<p class="time"><span>小记</span><time>2018-3-6 10:39:28</time></p>
						<p class="text"><a href="#">这个是功能很全的html5个人博客模板,焦点图动态展示,增加了站内搜索,微信关注.侧栏使用了颜色标签,使网站显得更加活泼.适合偏向技术型与门户型的站长...</a></p>
						<div class="bottom">
							<span class="fa fa-eye"><em>111</em></span>
							<span class="fa fa-pencil"><em>23</em></span>
							<span class="fa fa-thumbs-o-up"><em>6</em></span>
						</div>
					</div>
					<div class="box-section">
						<h4 class="title"><a href="#">为了部落</a></h4>
						<p class="time"><span>小记</span><time>2018-3-6 10:39:28</time></p>
						<p class="text"><a href="#">这个是功能很全的html5个人博客模板,焦点图动态展示,增加了站内搜索,微信关注.侧栏使用了颜色标签,使网站显得更加活泼.适合偏向技术型与门户型的站长...</a></p>
						<div class="bottom">
							<span class="fa fa-eye"><em>111</em></span>
							<span class="fa fa-pencil"><em>23</em></span>
							<span class="fa fa-thumbs-o-up"><em>6</em></span>
						</div>
					</div>
					<div class="box-section">
						<h4 class="title"><a href="#">为了部落</a></h4>
						<p class="time"><span>小记</span><time>2018-3-6 10:39:28</time></p>
						<p class="text"><a href="#">这个是功能很全的html5个人博客模板,焦点图动态展示,增加了站内搜索,微信关注.侧栏使用了颜色标签,使网站显得更加活泼.适合偏向技术型与门户型的站长...</a></p>
						<div class="bottom">
							<span class="fa fa-eye"><em>111</em></span>
							<span class="fa fa-pencil"><em>23</em></span>
							<span class="fa fa-thumbs-o-up"><em>6</em></span>
						</div>
					</div>
					<div class="box-section">
						<h4 class="title"><a href="#">为了部落</a></h4>
						<p class="time"><span>小记</span><time>2018-3-6 10:39:28</time></p>
						<p class="text"><a href="#">这个是功能很全的html5个人博客模板,焦点图动态展示,增加了站内搜索,微信关注.侧栏使用了颜色标签,使网站显得更加活泼.适合偏向技术型与门户型的站长...</a></p>
						<div class="bottom">
							<span class="fa fa-eye"><em>111</em></span>
							<span class="fa fa-pencil"><em>23</em></span>
							<span class="fa fa-thumbs-o-up"><em>6</em></span>
						</div>
					</div>
					<div class="box-btn">
						<a href="#">
							首页
						</a>
						<a href="#">
							末页
						</a>
					</div>
				</div>
				<div class="main-r">
					<video id="video" src="http://videooc.tc.qq.com/vcloud1022.tc.qq.com/1022_6a9c42dd9ea74b618f78987a1729caeb.f0.mp4?vkey=9D2FF938465C747ED3C62FAF8752C97318892A70A29A9659ADF88BB302ADD7B7FF97A8FA594C763286F0237AC6A139314A9950164ABE45FF440227EF330E486BDCB0E7010A18AF3F4A09DA65DAA47A2473506417BCCB0386&amp;sha=0" loop="loop"  style="width: 100%;height: auto; " ></video>
				</div>
				<p class="clearfix"></p>
			</div>
		</div>
	</body>
</html>
